<template>
    <div>
        <!-- This is Cinema page -->
        <mt-button type="primary" @click="handleClick()">{{ cityName }}</mt-button>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    // 注意一定要return，否则方法不会执行
    asyncData() {
        // process.server表明是否时在服务端运行，服务端端运行不用配置反向代理
        const url = process.server
            ? 'https://movie.douban.com/j/search_subjects?type=tv&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0'
            : '/j/search_subjects?type=tv&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0';
        return axios.get(url).then((res) => {
            console.log(res.data);
            return {
                doubanData: res.data
            };
        });
    },
    data() {
        return {
            cityId: '',
            cityName: '请选择城市'
        };
    },
    // data()属于ssr后台渲染没有window对象，所以要将localStorage放到浏览器生命周期中
    beforeMount() {
        this.cityId = localStorage.getItem('cityId') ? localStorage.getItem('cityId') : '';
        this.cityName = localStorage.getItem('cityName') ? localStorage.getItem('cityName') : '请选择城市';
    },
    methods: {
        handleClick() {
            this.$router.push('/city');
        }
    }
};
</script>

<style></style>
